<template>
  <div id="home">
    <NavBar>
      <template v-slot:left>&lt;</template>
      <template v-slot:default>图书商城</template>
    </NavBar>
    <!-- <tab-control
      v-show="isTabFixed"
      :titles="['畅销', '新书', '精选']"
      @tabClick="tabClick"
    ></tab-control> -->
    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <home-swiper :banners="banners"></home-swiper>
          <recommend-view :recommends="recommends"></recommend-view>
        </div>
        <tab-control
          :titles="['畅销', '新书', '精选']"
          @tabClick="tabClick"
        ></tab-control>
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </div>
    <back-top @click="bTop" v-show="isBackTopShow"></back-top>
  </div>
</template>

<script>
import RecommendView from "./ChildComps/RecommendView";
import NavBar from "components/common/navbar/NavBar";
import BackTop from "components/common/backTop/BackTop";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goods/GoodsList";
import { getHomeAllData, getHomeGoods } from "network/home";
import { onMounted, reactive, ref, computed, watchEffect, nextTick } from "vue";
import BetterScroll from "better-scroll";
import HomeSwiper from "./ChildComps/HomeSwiper.vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  components: {
    NavBar,
    RecommendView,
    TabControl,
    GoodsList,
    BackTop,
    HomeSwiper,
  },
  setup() {
    const recommends = ref([]); // 用于存放首页推荐栏的数据
    // let isTabFixed = ref(false);
    let banref = ref(null);
    let currentPage = ref(1);
    let currentType = ref("sales");
    let isBackTopShow = ref(false);
    let banners = ref([]);
    const store = useStore();

    // 商品类表数据模型
    const goods = reactive({
      sales: {
        page: 1,
        list: [],
      },
      new: {
        page: 1,
        list: [],
      },
      recommend: {
        page: 1,
        list: [],
      },
    });

    let bs = reactive({});

    onMounted(() => {
      getHomeAllData().then((res) => {
        // console.log(res.goods);
        recommends.value = res.goods.data;
        banners.value = res.slides;
      });

      getHomeGoods("sales").then((res) => {
        goods.sales.list = res.goods.data;
      });
      getHomeGoods("new").then((res) => {
        goods.new.list = res.goods.data;
      });
      getHomeGoods("recommend").then((res) => {
        goods.recommend.list = res.goods.data;
      });

      // // 设置store中cartCount购物车的数量
      // store.dispatch("updataCart");

      bs = new BetterScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        click: true,
        pullUpLoad: {
          threshold: 5000,
        },
        maxScrollY: -100,
      });

      bs.on("scroll", (position) => {
        // isTabFixed.value = -position.y > banref.value.offsetHeight;
        isBackTopShow.value = -position.y > banref.value.offsetHeight;
      });

      // 上拉加载数据，出发bs的pullingUp
      bs.on("pullingUp", () => {
        bs.refresh();
        const page = goods[currentType.value].page + 1;
        console.log(currentType.value + "" + page);
        getHomeGoods(currentType.value, page).then((res) => {
          goods[currentType.value].list.push(...res.goods.data);
          goods[currentType.value].page += 1;
        });

        // 完成上拉，等数据更新完成，将数据展示出来
        bs.finishPullUp();
        // 重新计算高度
        bs.refresh();
      });
    });
    const tabClick = (index) => {
      let types = ["sales", "new", "recommend"];
      currentType.value = types[index];
      bs.scrollTo(0, -banref.value.offsetHeight, 500);
      bs.refresh();
    };

    const showGoods = computed(() => {
      return goods[currentType.value].list;
    });

    // 监听 任何一个变量有变化
    watchEffect(() => {
      nextTick(() => {
        bs && bs.refresh();
      });
    });

    const bTop = () => {
      bs.scrollTo(0, 0, 500);
    };

    return {
      recommends,
      tabClick,
      goods,
      showGoods,
      bs,
      // isTabFixed,
      banref,
      currentPage,
      isBackTopShow,
      bTop,
      banners,
    };
  },
};
</script>

<style scoped>
#home {
  position: relative;
  height: 100vh;
}
.wrapper {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 50px;
  top: 45px;
}
</style>
